<template>
  <div>
    <el-dialog title="淘宝授权" :visible.sync="dialogShow">
      <el-form :model="form">
        <el-form-item v-if="!$store.getters.brand_id" label="选择品牌" :label-width="formLabelWidth">
          <brand-select @changeVal="brandChange" />
        </el-form-item>
        <el-form-item label="用户授权码" :label-width="formLabelWidth">
          <el-input v-model="form.code_num" autocomplete="off" />
        </el-form-item>
        <el-form-item label="店铺名称" :label-width="formLabelWidth">
          <el-input v-model="form.tb_name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="店铺网址" :label-width="formLabelWidth">
          <el-input v-model="form.tb_address" autocomplete="off" />
        </el-form-item>
        <el-form-item label="授权时长(天)" :label-width="formLabelWidth">
          <el-input v-model="form.day" autocomplete="off" type="number" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShow = false">取 消</el-button>
        <el-button type="primary" @click="submitBtn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import brandSelect from '@/components/BrandSelect'
import { AddNewTaobaoImpowerApi, resetTaobaoImpowerPicApi } from '@/api/agent'
import { getNewTime } from '@/utils/index'
import { drawPhoto } from '@/utils/drawPhoto'
import { conversion } from '@/utils/rules'
export default {
  components: {
    brandSelect
  },
  data() {
    return {
      form: {
        tb_address: '',
        tb_date: '',
        tb_status: '1',
        tb_name: '',
        day: '',
        code_num: ''
      },
      brand_id: this.$store.getters.brand_id,
      dialogShow: false,
      formLabelWidth: '100px'
    }
  },
  methods: {
    brandChange(val) {
      this.brand_id = val
    },
    submitBtn() {
      if (this.form.tb_address === '' || this.form.tb_name === '' || this.form.day === '' || this.form.code_num === '') {
        this.$message.warning('请填写所有的信息!')
        return false
      } else if (this.brand_id === '') {
        this.$message.warning('请选择授权品牌!')
        return false
      }
      const tb_date = getNewTime(Number(this.form.day))
      const pro = {
        tb_approval_img: '',
        tb_address: this.form.tb_address,
        tb_date: tb_date,
        tb_name: this.form.tb_name,
        tb_status: this.form.tb_status
      }
      const data = {
        pro: pro,
        brand_id: this.brand_id,
        code_num: this.form.code_num
      }
      console.log(data)
      AddNewTaobaoImpowerApi(data).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.dialogShow = false
          const textArr = [
            {
              text: res.anent_content.anent_name,
              x: 360,
              y: 360
            },
            {
              text: conversion(res.anent_content.people_card_num, 6, 14, 8),
              x: 360,
              y: 398
            },
            {
              text: this.form.tb_name,
              x: 360,
              y: 430
            },
            {
              text: this.form.code_num,
              x: 329,
              y: 500
            },
            {
              text: res.brand_content.brand_name,
              x: 480,
              y: 500
            },
            {
              text: '淘宝平台',
              x: 384,
              y: 535
            },
            {
              text: this.form.tb_address,
              x: 260,
              y: 570
            },
            {
              text: tb_date,
              x: 290,
              y: 675
            }
          ]
          let warrantImg = ''
          drawPhoto(res.brand_content.tb_approval_img, { width: '787', height: '1113' }, textArr, imgUrl => {
            console.log(imgUrl)
            warrantImg = imgUrl
            const that = this
            const imgData = {
              anent_id: res.anent_content.id,
              brand_id: this.brand_id,
              code_num: this.form.code_num,
              tb_approval_img: warrantImg
            }
            console.log(imgData)
            resetTaobaoImpowerPicApi(imgData).then(res => {
              console.log(res)
              if (res.code === 200) {
                that.$message.success('淘宝授权成功')
                that.form = {
                  tb_date: '',
                  tb_status: '1',
                  tb_name: '',
                  day: '',
                  code_num: ''
                }
                this.$emit('reloadFun')
              }
            })
          })
        } else if (res.code === 400) {
          this.$message.warning('授权编码填写错误，请重新填写！')
        }
      })
    }
  }
}
</script>

<style lang="sass" scoped>

</style>
